<template>
  <div class="tradeContainer">
    <div class="trade">
      <div class="trade-logo">
        <a><img src="./images/1688.png" /></a>
      </div>

      <div class="trade-address">

        <div class="trade-left">收货地址:</div>

        <div class="trade-right" v-show="show">
          <ul>
            <li><i class="iconfont icon-geren"></i>{{defaultAdd.name}}</li>
            <li>
              <i class="iconfont icon-weizhi"></i>{{defaultAdd.location+" "+defaultAdd.detailAddress}}
            </li>
            <li><i class="iconfont icon-youtong"></i>{{defaultAdd.postcode}}</li>
            <li><i class="iconfont icon-dianhua"></i>{{defaultAdd.phone}}</li>
          </ul>
          <div><a class="address-a" @click="show = false">更改</a></div>
          <div><a class="address-a">使用临时地址</a></div>
        </div>

        <div class="trade-change" v-show="!show">
          <ul>
            <li v-for="add in address">
              <div class="t-c-l">
                <input
                  type="radio"
                  name="address"
                  :value="add.id"
                  @click="chooseAddress(add.id)"
                />
                <span>{{
                  add.name + "  " + add.location + "  " + add.detailAddress
                }}</span>
              </div>
              <div class="t-c-r">
                <a href="#" v-show="!add.isDefault">设置默认收货地址</a>
                <span v-show="add.isDefault">默认地址</span>
                <a href="#">修改</a>
              </div>
            </li>
            <div class="addNewAddress">
              <input
                type="radio"
                name="address"
                value="add"
                @click="chooseAddress('add')"
              />
              <span>使用新地址</span>
            </div>
            <!-- <div class="trade-form" >
              <div class="tr-form-left" ></div>
              <div class="tr-form-right" ></div>
            </div> -->
            <div class="confirmAddress">
              <a class="confirmInfo">确认收货信息</a>
              <a class="cancel" @click="show = true">取消</a>
            </div>
          </ul>
        </div>
      </div>

      <div v-for="order in orderInfo">
        <div class="trade-merchant">
          <span>店铺:</span>
          <span>{{ order[0].merchant }}</span>
          <i class="iconfont icon-wangwang"></i>
        </div>
        <div class="trade-order">
          <div class="trade-order-container">
            <div class="oneTradeOrder">
              <div class="order-left">订单:</div>
              <table>
                <thead class="table-title" style="height: 40px">
                  <th style="padding: 0 20px; width: 50%">货品信息</th>
                  <th style="text-align: center">发布价(元)</th>
                  <th style="text-align: center">数量</th>
                  <th style="text-align: center">优惠(元)</th>
                  <th style="text-align: center">金额(元)</th>
                  <th style="text-align: center">运费(元)</th>
                </thead>
                <tbody>
                  <tr class="table-goods" v-for="oneOrder in order">
                    <td>
                      <div style="float: left">
                        <img :src="oneOrder.imgUrl" alt="" />
                      </div>
                      <div style="float: left">
                        <div style="padding: 5px">{{ oneOrder.goodsInfo }}</div>
                        <span style="padding: 5px"
                          >{{ oneOrder.props.propsName1 }}:{{
                            oneOrder.props.propsValue1
                          }}</span
                        >
                        <span style="padding: 5px"
                          >{{ oneOrder.props.propsName2 }}:{{
                            oneOrder.props.propsValue2
                          }}</span
                        >
                        <div style="color: #ec5b05; padding: 5px">
                          <i class="iconfont icon-icon"></i>
                          <i class="iconfont icon-tianmaobaoyouqia"></i>
                          <i class="iconfont icon-48xiaoshifahuo"></i>
                          <i class="iconfont icon-icon2"></i>
                        </div>
                      </div>
                    </td>
                    <td style="text-align: center">{{ oneOrder.unitPrice }}</td>
                    <td style="text-align: center">{{ oneOrder.num }}</td>
                    <td style="text-align: center">--</td>
                    <td style="text-align: center">
                      {{ oneOrder.unitPrice * oneOrder.num }}
                    </td>
                    <td style="text-align: center">--</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="trade-total">
        <div class="total-div1">总计:</div>
        <div class="total-div2">
          <span>货品种类:</span>
          <span>{{ totalCategory }}种</span>
          <span>数量总计:</span>
          <span>{{ totalNum }}件</span>
        </div>
        <ul>
          <li>
            货品总金额: <span>{{ totalPrice }}</span> 元
          </li>
          <li>运费共计: <span></span> 元</li>
          <li>
            应付总额(含运费): <span>{{ totalPrice }}</span> 元
          </li>
          <li>
            <input type="checkbox" />
            匿名购买
            <i class="iconfont icon-wenhao"></i>
          </li>
        </ul>
      </div>

      <div class="trade-vip">
        <img src="./images/plus.png" />
        <div class="vip-div1">
          <div>开通PLUS会员,本单立减<span>20.00</span>元</div>
          <div>
            开通年卡领<span>70元</span>通用红包,采满400元立即回本,<span>8000万</span>精选95折商品,月省<span>1210</span>起>
          </div>
        </div>
        <el-button class="vip-div2" size="small" round>立即开通</el-button>
      </div>

      <div shadow="always" class="trade-submit">
        <el-button class="submit-a" @click="goPay">提交订单</el-button>
        <div class="submit-span">
          应付总额(不含运费) : <span>{{ totalPrice }}元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqDefaultAdd } from "@/api";

export default {
  name: "Trade",
  data() {
    return {
      show: true,
      defaultAdd: {},
      inputShow:undefined,
      add:false
    };
  },
  mounted() {
    this.getOrderInfo();
    this.getAddress();
    this.fineDefault();
  },
  methods: {
    getOrderInfo() {
      this.$store.dispatch("getOrderInfo");
    },
    getAddress() {
      this.$store.dispatch("getAddress");
    },
    goPay() {
      this.$router.push({
        path: "pay",
      });
    },
    chooseAddress(value) {
      this.inputShow = value
    },
    // 查找默认的地址
    async fineDefault() {
      const res = await reqDefaultAdd(true);
      this.defaultAdd = res[0];
      // console.log(res[0]);
    },
  },
  computed: {
    ...mapState({
      orderInfo: (state) => state.trade.orderInfo,
      address: (state) => state.trade.address,
    }),
    totalCategory() {
      let num = 0;
      this.orderInfo.forEach((item) => {
        // console.log(item);
        num += item.length;
      });
      return num;
    },
    totalNum() {
      let num = 0;
      this.orderInfo.forEach((arr) => {
        arr.forEach((item) => {
          num += item.num;
        });
      });
      return num;
    },
    totalPrice() {
      let num = 0;
      this.orderInfo.forEach((arr) => {
        arr.forEach((item) => {
          num += item.unitPrice * item.num;
          // console.log(num);
        });
      });
      return num;
    },
  },
  watch:{
    inputShow:function(val){
      if(typeof(val)==="number"){
        console.log(val);
      }else {
        this.add = !this.add
      }
    }
  }
};
</script>

<style lang="less" scoped>
.tradeContainer {
  background-color: #f7f7f7;
  .trade {
    width: 1200px;
    margin: 0 auto;

    .trade-logo {
      padding: 20px 0;
    }

    .trade-address {
      padding: 20px 30px;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 20px;
      .trade-left {
        color: #999;
        float: left;
        width: 100px;
        // background-color: #ccc;
      }

      .trade-right {
        float: left;
        ul {
          li {
            float: left;
            margin-right: 10px;
            font-size: 12px;
            i {
              color: #dbdbdb;
            }
          }
        }

        div {
          display: inline-block;
          padding: 5px 15px 0px 0px;
        }
      }
      .trade-change {
        width: 1040px;
        float: left;
        overflow: hidden;
        ul {
          li {
            box-sizing: border-box;
            height: 32px;
            // background-color: #fceede;
            box-sizing: border-box;
            padding: 8px 20px;
            .t-c-l {
              float: left;

              input {
                vertical-align: sub;
                margin-right: 20px;
              }
            }
            .t-c-r {
              float: right;
              a {
                margin: 0 10px;
              }
              a:hover {
                color: #ff6200;
              }
            }
          }
          li:hover {
            background-color: #fceedeb9;
          }

          .addNewAddress {
            box-sizing: border-box;
            height: 32px;
            box-sizing: border-box;
            padding: 8px 20px;
            input {
              vertical-align: sub;
              margin-right: 20px;
            }
          }

          .confirmAddress {
            margin-top: 20px;
            padding: 0 50px;
            .confirmInfo {
              display: block;
              float: left;
              margin-right: 30px;
              background-color: #fb6106;
              color: #fff;
              width: 72px;
              height: 26px;
              padding: 0 16px;
              line-height: 26px;
              text-align: center;
              border: 1px solid #ddd;
            }
            .confirmInfo:hover {
              background-color: #ec5b05;
            }
            .cancel {
              display: block;
              float: left;
              margin-right: 30px;
              width: 72px;
              height: 26px;
              padding: 0 16px;
              line-height: 26px;
              text-align: center;
              border: 1px solid #ddd;
            }
          }
        }
      }
      .trade-form {
        width: 1040px;
        height: 300px;
        background-color: #bfa;
        float: left;
        margin:10px 0;
        .tr-form-left{

          width: 626px;
          height: 295px;
          // background-color: red;
          border-right: 1px dashed #ccc;
        }
      }
    }

    .trade-merchant {
      background-color: #e2edf8;
      font-size: 12px;
      line-height: 40px;
      height: 40px;

      span {
        padding: 0 5px;
      }
      .icon-wangwang {
        color: #3fa7ff;
      }
    }

    .trade-order {
      background-color: #fff;
      margin-bottom: 10px;
      box-sizing: border-box;
      padding: 30px 30px 0 30px;

      .trade-order-container {
        padding-bottom: 30px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        .oneTradeOrder {
          overflow: hidden;
          margin-bottom: 10px;
          .order-left {
            float: left;
          }
          table {
            float: right;
            box-sizing: border-box;
            border: 1px solid #e3edf8;
            width: 1020px;
            background-color: #f9fbff;
            border-collapse: collapse;
            .table-title {
              height: 30px;
            }
            .table-goods {
              height: 116px;
              box-sizing: border-box;
              padding: 12px 0;
            }
          }
        }
      }
    }

    .trade-total {
      height: 170px;
      background-color: #fef8e1;
      box-sizing: border-box;
      border: 1px solid #fbe1a3;
      padding: 20px 30px;
      margin-bottom: 10px;
      div {
        float: left;
      }
      .total-div1 {
        font-size: 14px;
        color: #333;
        margin-right: 50px;
      }
      .total-div2 {
        span {
          margin-right: 10px;
        }
      }
      ul {
        float: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        li {
          margin-bottom: 10px;
          span {
            font-size: 20px;
            font-weight: bolder;
            color: #ff6000;
          }
        }
      }
    }

    .trade-vip {
      height: 55px;
      background-color: #fbebdf;
      margin-bottom: 15px;
      img {
        width: 32px;
        float: left;
        padding: 17px 10px;
      }
      .vip-div1 {
        line-height: 27px;
        float: left;
      }
      .vip-div2 {
        float: right;
        // width: 72px;
        // height: 30px;
        // border-radius: 15px;
        background: #f4bb92;
        font-size: 12px;
        // line-height: 30px;
        // text-align: center;
        margin: 12px 10px 0 0;
      }
    }

    .trade-submit {
      height: 60px;
      background-color: #fff;
      margin-bottom: 50px;
      .submit-a {
        float: right;
        width: 180px;
        height: 60px;
        // text-align: center;
        // line-height: 60px;
        background-color: #ff6000;
        color: #fff;
        font-size: 16px;
      }
      .submit-span {
        float: right;
        height: 60px;
        line-height: 60px;
        width: 214px;
        text-align: center;
        padding-right: 20px;
        color: #333;
        font-size: 12px;
        span {
          color: #ff6000;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
